<template>
    <div id="content">
        <h1>Ms coat</h1>
        <div class="line">
        <p> 
            <van-cell is-link title="Best Match" @click="show = true"  />
            <!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
            <van-action-sheet v-model="show" title="Sort">
            <div class="cont">
            <h4 class="wrap h">Best Match</h4>
            <h4 class="wrap">Newest</h4>
            <h4 class="wrap">price-Low To Hight</h4>
            <h4 class="wrap">price-Hight To Low</h4>
            </div>
            </van-action-sheet> 
        </p>
        <p>
            315 resylts
        </p>
        </div>
        <div class="up">
            <div class="first">
                <img src="~@/assets/img/second.jpg" alt="second">
                <p>Product Title</p><p class="two"><span>$256</span><span>$667</span></p>
            </div>
            <div class="first add">
                <img src="~@/assets/img/three.jpg" alt="three">
                <p>Product Title</p><p class="two"><span>$256</span><span>$667</span></p>
            </div>
        </div>
        <div class="up">
            <div class="first">
                <img src="~@/assets/img/four.jpg" alt="second">
                <p>Product Title</p><p class="two"><span>$256</span><span>$667</span></p>
            </div>
            <div class="first add">
                <img src="~@/assets/img/first.jpg" alt="three">
                <p>Product Title</p><p class="two"><span>$256</span><span>$667</span></p>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { ActionSheet ,Toast,Cell} from 'vant';
Vue.use(ActionSheet);
Vue.use(Toast);
Vue.use(Cell);
export default{
     data() {
    return {
      show: false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
  },
}
</script>
<style scoped lang='scss'>
.cont{
    .wrap{
        text-align: left;
        padding: 13px 13px;
        border-bottom:1px solid #999;
  }
  .h{
      border-top:1px solid black;
  }
}

.line{
    display:flex;
    text-align: center;
    @mixin pstyle{
        flex:1;
        font-size:16px;
        border:1px solid #999;
        color:#333;
        // box-sizing:border-box;
        height:50px;
        line-height: 50px;
    }
    p:nth-child(1){
        border-right:0;
        @include pstyle;
        .van-dropdown-menu__title{
            padding:0 15px;
        }
        
    }
    p:nth-child(2){
        @include pstyle;
    }
}
.up{
    display:flex;
    .first{
        padding:10px 10px;
        flex: 1;
        font-size:16px;
        height:320px;
        img{
            width:100%;
            height:230px;
        }
        p:nth-child(1){
            color:#999;
        }
        .two{
            color:black;
            font-weight:bold;
            font-size:16px;
            span:nth-child(2){
                color:#999;
                margin-left:20px;
                text-decoration: line-through;
            }
        }
    }
    .add{
        padding:10px 20px 10px 20px;
    }
}
</style>
